<template>
  <div>
    Home
    <h3>Mouse: {{ x }} : {{ y }}</h3>
    <img :src="url" alt="" srcset="" />
    <img :src="url2" alt="" srcset="" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { useMouse } from '@vueuse/core';

import qh from './qh.jpg';

@Component({
  setup() {
    const { x, y } = useMouse();
    return { x, y };
  }
})
export default class Home extends Vue {
  private url = '';
  private url2 = '';
  mounted() {
    const img = new Image();
    img.setAttribute('crossOrigin', 'Anonymous');
    img.onload = () => {
      let canvas: HTMLCanvasElement | null = document.createElement('canvas');
      const cxt = canvas.getContext('2d') as CanvasRenderingContext2D;
      const dpr = window.devicePixelRatio || 1;
      canvas.width = img.width * dpr;
      canvas.height = img.height * dpr;
      canvas.style.width = img.width + 'px';
      canvas.style.height = img.height + 'px';
      cxt.drawImage(
        img,
        0,
        0,
        img.width,
        img.height,
        0,
        0,
        canvas.width,
        canvas.height
      );
      cxt.beginPath();
      cxt.strokeStyle = 'red';
      cxt.lineWidth = 2 * dpr;
      cxt.rect(100 * dpr, 100 * dpr, 50 * dpr, 200 * dpr);
      cxt.stroke();
      this.url = canvas.toDataURL('image/jpeg').replace(/\s/g, '');

      const c = document.createElement('canvas');
      c.width = 100 * dpr;
      c.height = 230 * dpr;
      c.style.width = 100 + 'px';
      c.style.height = 230 + 'px';
      const data = cxt.getImageData(80, 80, 100, 230);
      const context = c.getContext('2d') as CanvasRenderingContext2D;
      context.putImageData(data, 0, 0);
      this.url2 = c.toDataURL('image/jpeg').replace(/\s/g, '');

      cxt.fillRect(0, 0, canvas.width, canvas.height);
      canvas = null;
    };

    img.src = qh;
  }
}
</script>
<style lang="scss" scoped></style>
